<template>
  <div>
    <div class="main">
      <div style="display: block;overflow: hidden;">
        <el-button type="primary" style="float: left" @click="toAdd">新增</el-button>
        <el-button type="primary" style="float: right;" @click="getList">搜索</el-button>
        <el-input style="float:right;display: inline-block;width: 200px" v-model="channelName"
                  placeholder="请输入频道名称"></el-input>
      </div>
      <el-table :data="list" v-show="reset" border style="width: 100%;margin-top: 20px">
        <el-table-column width="50" prop="id" label="序号"></el-table-column>
        <el-table-column prop="channelName" label="频道名称"></el-table-column>
        <el-table-column prop="courseCount" label="关联课程数">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <span @click="changeStatus(scope.row,2)">配置</span>
            <span @click="toAdd(scope.row)">{{$t('action.edit')}}</span>
            <span @click="delete(scope.row)">{{$t('action.delete')}}</span>
            <span v-show="scope.$index != 0" @click="changeSortIndex(1,list,scope.$index)">上移</span>
            <span v-show="scope.$index != list.length-1" @click="changeSortIndex(2,list,scope.$index)">下移</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right;margin: 10px 0" background pageZize="10" @current-change="getList" layout="prev, pager, next" :total="count">
      </el-pagination>
    </div>
    <el-dialog title="编辑频道" :visible.sync="isAdd" @close="close">
      <el-form :model="channel" :inline="true" class="demo-form-inline">
        <el-form-item label="频道名称：" :label-width="'90px'">
          <el-input v-model="channel.channelName" autocomplete="on" placeholder="请输入频道名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">{{$t('action.cancel')}}</el-button>
        <el-button type="primary" @click="addChannel(channel)">{{$t('action.comfirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import util from "@/utils/util";

  export default {
    name: "ChannelIndex",
    components: {},
    data() {
      return {
        isAdd: false,
        channel:{channelName:""},
        channelName: '',
        count: 0,
        list: [],
        reset:true,
        changeSortIndex:null,
      }
    },
    created() {
      const {changeSortIndex} = util;
      this.changeSortIndex = changeSortIndex
      this.getList();
    },
    methods: {
      getList(current) {
        console.log(current)
        console.log(this)
        this.$api.mall.getChannelList({channelName: this.channelName + ':', pageIndex: 0, pageSize: 10}).then(
          res => {
            this.count = res.data.count;
            this.list = res.data.list;
          }
        )
      },
      toAdd(row) {
        this.isAdd = true
      },
      addChannel(){

      },
      changeStatus() {

      },
      delete() {

      },
      close() {
        this.isAdd = false;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
  }

  .el-table {
    table-layout: fixed;
    margin-top: 30px;
  }

  .cell {
    span {
      display: inline-block;
      margin-right: 8px;
      font-size: 12px;
      min-width: 50px;
      box-sizing: border-box;
      text-align: center;
      padding: 2px 10px;
      background-color: #f0f0f0;
      border-radius: 3px;
      cursor: pointer;
    }

    span.btn-normal {
      color: #2a75ed;
    }

    span.btn-danger {
      color: #911b12;
    }
  }
</style>
